

<template>
  <div class="rolemanageSetting-mokuai">
      <div class="accounts-index">
        <div class="accounts-name">
          <div class="accounts-name-font">编辑支付方式
              <div class="float-right"><el-button icon="el-icon-arrow-left" @click.native="returnButton" size="small">返回</el-button></div>
          </div>


        </div>
        <div class="rolemanageSetting-content">
         <!-- 第一块 -->
         <div class="content-setting padding-left">
    <div class="accounts-name"><el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange" class="accounts-name-font">商品管理</el-checkbox></div>
  <div style="margin: 15px 0;"></div>
  <div class="margin-left">
 <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
  <el-checkbox v-for="city in cities" :label="city" :key="city" border="true" class="box-setting">{{city}}</el-checkbox>
  </el-checkbox-group>
  </div>
 
         </div>
          <!-- 第二块 -->
         <div class="content-setting padding-left">
    <div class="accounts-name"><el-checkbox :indeterminate="isIndeterminateA" v-model="checkAllA" @change="handleCheckAllChangeA" class="accounts-name-font">订单管理</el-checkbox></div>
  <div style="margin: 15px 0;"></div>
  <div class="margin-left">
 <el-checkbox-group v-model="checkedCitiesA" @change="handleCheckedCitiesChangeA">
  <el-checkbox v-for="city in citiesA" :label="city" :key="city" border="true" class="box-setting">{{city}}</el-checkbox>
  </el-checkbox-group>
  </div>
 
         </div>
          <!-- 第三块 -->
         <div class="content-setting padding-left">
    <div class="accounts-name"><el-checkbox :indeterminate="isIndeterminateB" v-model="checkAllB" @change="handleCheckAllChangeB" class="accounts-name-font">用户管理</el-checkbox></div>
  <div style="margin: 15px 0;"></div>
  <div class="margin-left">
 <el-checkbox-group v-model="checkedCitiesB" @change="handleCheckedCitiesChangeB">
  <el-checkbox v-for="city in citiesB" :label="city" :key="city" border="true" class="box-setting">{{city}}</el-checkbox>
  </el-checkbox-group>
  </div>
 
         </div>
          <!-- 第四块 -->
         <div class="content-setting padding-left">
    <div class="accounts-name"><el-checkbox :indeterminate="isIndeterminateC" v-model="checkAllC" @change="handleCheckAllChangeC" class="accounts-name-font">促销管理</el-checkbox></div>
  <div style="margin: 15px 0;"></div>
  <div class="margin-left">
 <el-checkbox-group v-model="checkedCitiesC" @change="handleCheckedCitiesChangeC">
  <el-checkbox v-for="city in citiesC" :label="city" :key="city" border="true" class="box-setting">{{city}}</el-checkbox>
  </el-checkbox-group>
  </div>
 
         </div>
          <!-- 第五块 -->
         <div class="content-setting padding-left">
    <div class="accounts-name"><el-checkbox :indeterminate="isIndeterminateD" v-model="checkAllD" @change="handleCheckAllChangeD" class="accounts-name-font">运营管理</el-checkbox></div>
  <div style="margin: 15px 0;"></div>
  <div class="margin-left">
 <el-checkbox-group v-model="checkedCitiesD" @change="handleCheckedCitiesChangeD">
  <el-checkbox v-for="city in citiesD" :label="city" :key="city" border="true" class="box-setting">{{city}}</el-checkbox>
  </el-checkbox-group>
  </div>
 
         </div>
    
    <!-- 选择全部 -->
   
         <div class="content-setting padding-left">
    <div class="accounts-name"><el-checkbox :indeterminate="isIndeterminateE" v-model="checkAllE" @change="handleCheckAllChangeE" class="name-font-center">选择全部</el-checkbox></div>

         </div>
          <div class="content-button">
               <div class=""><el-button type="primary" @click="submitForm('checkedCities')">提交</el-button></div>
          </div>
        
        </div>
      </div>
    </div>
</template>

<style>
  /* 自定义 */
  .manageSetting-button{
      
      padding-left: 23%;
  }
 .margin-left{
     margin-left:20px;
 }
  .padding-left{
padding-left: 40px;
  }
  .content-setting{
      margin-top: 20px;
  }
  .box-setting{
      width: 160px;
      margin-left: 10px;
  }
 
.select-width{
    width: 100px;
}
.float-right{
    float:right;
}
.rolemanageSetting-mokuai {
  height:1600px;
  background-color: rgb(249, 249, 249);
  padding-top: 30px;
}
.accounts-index {
  width: 80%;
  margin: auto;
  background-color: rgb(255, 255, 255);
}
.accounts-name {
  width: 100%;
  height: 40px;
  background-color: rgb(240, 240, 240);
}
.accounts-name-font {
  height: 40px;
  line-height: 40px;
  margin-left: 20px;
  font-size: 14px;
}
.name-font-center{
    height: 40px;
    line-height: 40px;
    margin-left: 40%;
    font-size: 14px;
}
.rolemanageSetting-content {
  width: 100%;
  height:1500px;
  
}
.content-button{
  margin-top: 10px;
  text-align: center;
}
.button-center {
 text-align: center;
}
</style>

<script>
// 第一块
  const cityOptions = [
  '商品添加/编辑','商品删除/恢复','分类添加/编辑','分类转移/删除','商品属性管理',
  '商品评价管理','商品自动上下架','图片批量处理','商品批量导出','图片库管理','商品添加/编辑',
  '商品删除/恢复',' 分类转移/删除','商品属性管理','商品评价管理','商品自动上下架',' 图片批量处理','商品批量导出'];
  // 第二块
  const cityOptionsA = ['商品添加/编辑', '商品删除/恢复', '分类添加/编辑', '分类转移/删除','商品属性管理',
  '商品评价管理','商品自动上下架','图片批量处理','商品批量导出','图片库管理','商品添加/编辑',
  '商品删除/恢复',' 分类转移/删除','商品属性管理','商品评价管理','商品自动上下架',' 图片批量处理','商品批量导出'];
  // 第三块
  const cityOptionsB = ['商品添加/编辑', '商品删除/恢复', '分类添加/编辑', '分类转移/删除','商品属性管理',
  '商品评价管理','商品自动上下架','图片批量处理','商品批量导出','图片库管理','商品添加/编辑',
  '商品删除/恢复',' 分类转移/删除','商品属性管理','商品评价管理','商品自动上下架',' 图片批量处理','商品批量导出'];
  // 第四块
  const cityOptionsC= ['商品添加/编辑', '商品删除/恢复', '分类添加/编辑', '分类转移/删除','商品属性管理',
  '商品评价管理','商品自动上下架','图片批量处理','商品批量导出','图片库管理','商品添加/编辑',
  '商品删除/恢复',' 分类转移/删除','商品属性管理','商品评价管理','商品自动上下架',' 图片批量处理','商品批量导出'];
  // 第五块
  const cityOptionsD = ['商品添加/编辑', '商品删除/恢复', '分类添加/编辑', '分类转移/删除','商品属性管理',
  '商品评价管理','商品自动上下架','图片批量处理','商品批量导出','图片库管理','商品添加/编辑',
  '商品删除/恢复',' 分类转移/删除','商品属性管理','商品评价管理','商品自动上下架',' 图片批量处理','商品批量导出'];
  export default {
    data() {
     
   
   
      return {
         checkAllE: false,
          isIndeterminateE: true,
        //   第一块
    checkAll: false,
        checkedCities: ['上海', '北京'],
        cities: cityOptions,
        isIndeterminate: true,
          //   第二块
    checkAllA: false,
        checkedCitiesA: ['上海', '北京'],
        citiesA: cityOptionsA,
        isIndeterminateA: true,
          //   第三块
    checkAllB: false,
        checkedCitiesB: ['上海', '北京'],
        citiesB: cityOptionsB,
        isIndeterminateB: true,
          //   第四块
    checkAllC: false,
        checkedCitiesC: ['上海', '北京'],
        citiesC: cityOptionsC,
        isIndeterminateC: true,
          //   第五块
    checkAllD: false,
        checkedCitiesD: ['上海', '北京'],
        citiesD: cityOptionsD,
        isIndeterminateD: true
          
      };

     
    },
    methods: {
      // 返回
         returnButton(){
                this.$router.replace({ path: "/settings/roleManage"});
            },
            // 第一块
             handleCheckAllChange(val) {
        this.checkedCities = val ? cityOptions : [];
        this.isIndeterminate = false;
      },
      handleCheckedCitiesChange(value) {
        let checkedCount = value.length;
        this.checkAll = checkedCount === this.cities.length;
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
      },
       // 第二块
             handleCheckAllChangeA(val) {
        this.checkedCitiesA = val ? cityOptionsA : [];
        this.isIndeterminateA = false;
      },
      handleCheckedCitiesChangeA(value) {
        let checkedCount = value.length;
        this.checkAllA = checkedCount === this.citiesA.length;
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.citiesA.length;
      },
       // 第三块
             handleCheckAllChangeB(val) {
        this.checkedCitiesB = val ? cityOptionsB : [];
        this.isIndeterminateB = false;
      },
      handleCheckedCitiesChangeB(value) {
        let checkedCount = value.length;
        this.checkAllB = checkedCount === this.citiesB.length;
        this.isIndeterminateB = checkedCount > 0 && checkedCount < this.citiesB.length;
      },
       // 第四块
             handleCheckAllChangeC(val) {
        this.checkedCitiesC = val ? cityOptionsC : [];
        this.isIndeterminateC = false;
      },
      handleCheckedCitiesChangeC(value) {
        let checkedCount = value.length;
        this.checkAllC = checkedCount === this.citiesC.length;
        this.isIndeterminateC = checkedCount > 0 && checkedCount < this.citiesC.length;
      },
       // 第五块
             handleCheckAllChangeD(val) {
        this.checkedCitiesD = val ? cityOptionsD : [];
        this.isIndeterminateD = false;
      },
      handleCheckedCitiesChangeD(value) {
        let checkedCount = value.length;
        this.checkAllD = checkedCount === this.citiesD.length;
        this.isIndeterminateD = checkedCount > 0 && checkedCount < this.citiesD.length;
      },
       // 全部
             handleCheckAllChangeE(val) {
           this.checkedCities = val ? cityOptions : [];
           this.checkedCitiesA = val ? cityOptionsA : [];
           this.checkedCitiesB = val ? cityOptionsB : [];
           this.checkedCitiesC = val ? cityOptionsC : [];
           this.checkedCitiesD = val ? cityOptionsD : [];
         
        this.isIndeterminateE = false;
          
      },

    //   保存
       submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          alert("submit!")
        } else {
          console.log("error submit!!")
          return false
        }
      })
    }
        
    },
  
  };
</script>